<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <script src="js/jquery.min.js" rel="script"></script>
    <script src="js/echarts.js"></script>
    <script src="js/shandong.js"></script>

    <style>
        *{margin:0;padding:0}
        html,body{
            width:100%;
            height:100%;
        }
        #main{
            width:600px;
            height:450px;
            margin: 150px auto;
            border:1px solid #ddd;
        }
        /*默认长宽比0.75*/
    </style>
</head>
<body>
<div id="main">

</div>
<script type="text/javascript">

     var myChart = echarts.init(document.getElementById('main'));

    $(document).ready(function() {
        var dataList= [
                {name: '新户乡', value: 3000},//randomValue()
                {name: '太平乡', value: 2000},
                {name: '湾湾沟乡', value: 4000},
                {name: '河口区', value: 5000},
                {name: '孤岛镇', value: 1000},
                {name: '仙河镇', value: 2000}
            ]
        function randomValue() {
            return Math.round(Math.random()*1000);
        }
        $.get('js/370503.json', function (geoJson) {

            myChart.hideLoading();
            //console.log(geoJson)
            echarts.registerMap('河口', geoJson);

            myChart.setOption(option = {
                // tooltip: {
                //     trigger: 'item',
                //     formatter: '{b}<br/>{c}'
                // },
                tooltip: {
                    formatter:function(params){
                        return '纳入医养总人数统计'+'<br />'+params.name+'：'+params.value
                    }//数据格式化
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        dataView: {readOnly: false},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                visualMap: {
                    min: 800,
                    max: 50000,
                    text: ['High', 'Low'],
                    realtime: false,
                    calculable: true,
                    inRange: {
                        color: ['lightskyblue', 'yellow', 'orangered']
                    }
                },
                series: [
                    {
                        type: 'map',
                        mapType: '河口', // 自定义扩展图表类型
                        itemStyle: {
                            normal: {label: {show: true}},
                            emphasis: {label: {show: true}}
                        },
                        data:dataList,
                        // 自定义名称映射
                        // nameMap: {
                        //     'Central and Western': '中西区',
                        //     'Eastern': '东区',
                        //     'Islands': '离岛',
                        //     'Kowloon City': '九龙城',
                        //     'Kwai Tsing': '葵青',
                        //     'Kwun Tong': '观塘',
                        //     'North': '北区',
                        //     'Sai Kung': '西贡',
                        //     'Sha Tin': '沙田',
                        //     'Sham Shui Po': '深水埗',
                        //     'Southern': '南区',
                        //     'Tai Po': '大埔',
                        //     'Tsuen Wan': '荃湾',
                        //     'Tuen Mun': '屯门',
                        //     'Wan Chai': '湾仔',
                        //     'Wong Tai Sin': '黄大仙',
                        //     'Yau Tsim Mong': '油尖旺',
                        //     'Yuen Long': '元朗'
                        // }
                    }
                ]
            });
        })
    })
</script>
</body>
</html>